<template>
  <el-form ref="changePwdForm" :inline="false" :model="formObj" :rules="formObj.rules" label-position="right">
    <el-form-item :label="getLang('oldPwd')" prop="oldPwd">
      <el-input
        v-model.trim="formObj.oldPwd"
        :class="formObj.pwdType.oldPwd"
        size="small"
        :placeholder="getPlholderInput('oldPwd')"
        autocomplete="new-password"
      />
      <span class="show-pwd" @click="showPwd('oldPwd')">
        <svg-icon :icon-class="formObj.pwdType.oldPwd === 'no-autofill-pwd' ? 'eye' : 'eye-open'" />
      </span>
    </el-form-item>
    <el-form-item :label="getLang('newPwd1')" prop="newPwd1">
      <el-input
        v-model.trim="formObj.newPwd1"
        :class="formObj.pwdType.newPwd1"
        size="small"
        :placeholder="getPlholderInput('newPwd1')"
        autocomplete="new-password"
      />
      <span class="show-pwd" @click="showPwd('newPwd1')">
        <svg-icon :icon-class="formObj.pwdType.newPwd1 === 'no-autofill-pwd' ? 'eye' : 'eye-open'" />
      </span>
    </el-form-item>
    <el-form-item :label="getLang('newPwd2')" prop="newPwd2">
      <el-input
        v-model.trim="formObj.newPwd2"
        :class="formObj.pwdType.newPwd2"
        size="small"
        :placeholder="getPlholderInput('newPwd2')"
        autocomplete="new-password"
      />
      <span class="show-pwd" @click="showPwd('newPwd2')">
        <svg-icon :icon-class="formObj.pwdType.newPwd2 === 'no-autofill-pwd' ? 'eye' : 'eye-open'" />
      </span>
    </el-form-item>
    <el-form-item>
      <el-button size="small" type="primary" @click="handleUpdatePwd()">
        {{ getLang('actions.updProfile') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import * as coreFnc from '../../common/utils/CoreFunction'
import * as app from '../../common/utils/BaseApp'
import * as ck from '../../common/utils/validater'
import * as utils from '@/utils/verify'
import { throttle } from '../../common/utils/throttle'

import store from '@/store'
import { decrypt, encrypt } from '@/utils/keygen'

import { changeProfilePassword } from '@/api/system/user'
import langFile from '../profile.lang'
const base = app.install({ langObj: langFile })
export default {
  name: 'Password',
  mixins: [base],
  data() {
    return {
      formObj: {
        pwdType: {
          oldPwd: 'no-autofill-pwd',
          newPwd1: 'no-autofill-pwd',
          newPwd2: 'no-autofill-pwd'
        },
        oldPwd: '',
        newPwd1: '',
        newPwd2: '',
        rules: {
          oldPwd: [ck.createRequiredValidater(this), ck.createMaxLenValidater(this, 20)],
          newPwd1: [ck.createRequiredValidater(this), ck.createMaxLenValidater(this, 20), ck.createCustomValidater(this, this.pwdIsSameValidator)],
          newPwd2: [ck.createRequiredValidater(this), ck.createMaxLenValidater(this, 20), ck.createCustomValidater(this, this.pwdIsSameValidator)]
        }
      }
    }
  },
  methods: {
    showPwd(key) {
      const _target = this.formObj.pwdType
      _target[key] === 'no-autofill-pwd' ? _target[key] = '' : _target[key] = 'no-autofill-pwd'
    },
    // ----------------------- 密码一致Check ---------------------
    pwdIsSameValidator(rule, value, callback) {
      if (utils.isContainsVal(this.formObj.newPwd1.trim()) && utils.isContainsVal(this.formObj.newPwd2.trim())) {
        const isSame = this.formObj.newPwd1.trim() === this.formObj.newPwd2.trim()
        if (!isSame) {
          callback(new Error(this.getLang('message.rule.pwdNotSame')))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    handleUpdatePwd: throttle.bind(this)(function() {
      coreFnc.createValidatePromise(this, 'changePwdForm', async() => {
        await changeProfilePassword({
          loginName: store.getters.loginName,
          oldPassword: encrypt(this.formObj.oldPwd.trim()),
          password: encrypt(this.formObj.newPwd1.trim()),
          password2: encrypt(this.formObj.newPwd2.trim()) })
        setTimeout(() => {
          this.formObj.oldPwd = ''
          this.formObj.newPwd1 = ''
          this.formObj.newPwd2 = ''
        }, 0)
      }, true)
    })
  }
}
</script>

<style lang="scss" scoped>
.show-pwd {
  position: absolute;
  right: 10px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  text-align: center;
}
</style>
